import React, { useState } from 'react';
import { Button, DatePicker } from 'antd';
import PropTypes from 'prop-types';
import moment from 'moment';

const { MonthPicker } = DatePicker;

const MonthDtae = props => {
    const { defaultValue, titleStyle, onClick } = props;
    const [value, setValue] = useState(defaultValue);

    return (
        <div style={{ padding: '7px 0' }}>
            <span style={{ marginRight: '15px', ...titleStyle }}>
                选择月份:
            </span>
            <MonthPicker
                allowClear={false}
                defaultValue={defaultValue}
                onChange={date => setValue(date)}
                format="YYYY-MM"
                style={{
                    width: '140px',
                    marginRight: '15px',
                    verticalAlign: 'middle'
                }}
            />
            <Button
                type="primary"
                icon="search"
                onClick={() => {
                    onClick(value);
                }}
            >
                查询
            </Button>
        </div>
    );
};
MonthDtae.propTypes = {
    defaultValue: PropTypes.object,
    onClick: PropTypes.func,
    titleStyle: PropTypes.object
};
MonthDtae.defaultProps = {
    defaultValue: moment('2019-06', 'YYYY-MM'),
    onClick: () => {},
    titleStyle: {}
};
export default MonthDtae;
